<template>
    <div id="tab-bar-item" @click="ChangeTo">
        <div v-if="isActive"><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <div v-bind:style="styleColor"><slot name="item-text"></slot></div>
    </div>
</template>

<script>
    export default {
        name: "TabBarItem",
        props:{
            path:String,
            activeColor:{
                type:String,
                default:'black'
            }
        },
        computed:{
            isActive(){
                return this.$route.path.indexOf(this.path) === -1
            },
            styleColor(){
                return this.isActive ? {} : {color:this.activeColor}
            }
        },
        methods:{
            ChangeTo(){
                //跳转页面
                if(this.$route.path.indexOf(this.path) === -1){
                    this.$router.replace(this.path)
                }
            },
        }
    }
</script>

<style scoped>
    #tab-bar-item{
        flex: 1;
        text-align: center;
        height: 49px;
        font-size: 12px;
        margin-top:3px ;
    }
    #tab-bar-item img{
        margin-top: 5px;
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }
</style>